<template>
	<!-- 我的课程表 -->
	<div class="downrecord" id="downrecord">
		<div class="personalCont_Cont_right_cont contB">
			<ul class="personalCont_Cont_right_cont_tab_contB">
				<li :class="{personRicont:personRicont === 1}" @click="personRicont = 1">我的课程表</li>
				<div style="clear:both;"></div>
				<!-- <li :class="{personRicont:personRicont === 2}" @click="personRicont = 2"><a href="##">文章指导流程</a></li> -->
			</ul>
			<p class="personalCont_Cont_right_cont_tishi" v-if="courselisTit == 0">
				<i class="iconfont icon-gantanhao"></i>您还未报名过课程呦，快去
				<text @click="toPages">找些感兴趣的课程</text>吧!
			</p>
			<div class="personalCont_Cont_right_cont_list" v-for="(item,index) in courselisTit" :key="index"
				v-show="personRicont == 1">
				<div class="personalCont_Cont_right_cont_list_head" @click="getmenu(index,item.OpClassId)">
					<!-- <span>{{item.CourseName}}</span>
          <span>({{item.StartDate}}-{{item.EndDate}})</span>
          <span><i style="font-size:23px" :class="articleShow ? 'iconfont icon-icon' : 'iconfont icon-arrow'"></i></span>
          <span>{{item.ClassName}}</span>-->
					<p>{{item.CourseName}}</p>
					<p>({{item.StartDate}} - {{item.EndDate}})</p>
					<p>
						<span>{{item.ClassName}}</span>
						<span>
							<i style="font-size:23px"
								:class="articleShow ? 'iconfont icon-icon' : 'iconfont icon-arrow'"></i>
						</span>
					</p>
				</div>
				<div class="personalCont_Cont_right_cont_list_body" v-show="articleShow">
					<li v-for="(item,index) in courselisMenu" :key="index">
						<p>{{item.Title}}</p>
						<p>({{item.StartDate}}-{{item.EndDate}})</p>

						<!-- <div
							v-if="finTimeB < new Date((item.StartDate).toString().replace('/-/g', '/')) && item.IsStart == false">
							待开播</div> -->
						<div v-if="finTimeB1(item)" @click="tomenuzhibojoin(item,index)"
							style="background:#003c80;color:#fff;border:none;padding: 7px 15px;">进入直播</div>
						<div v-if="finTimeB2(item)" @click="tomenuzhibohuifang(item,index)">回放</div>
						<div v-if="finTimeB3(item)">
							待开播</div>
						<div v-if="finTimeB4(item)" @click="tomenuzhibojoin(item,index)"
							style="background:#003c80;color:#fff;border:none;padding: 7px 15px;">进入直播</div>
						<div v-if="finTimeB5(item)" @click="tomenuzhibohuifang(item,index)">回放</div>
						<div v-if="finTimeB6(item)">待分配</div>
					</li>
				</div>
			</div>
			<!-- <div class="personalCont_Cont_right_cont_listB" v-show="personRicont == 2">
        <ul>
          <li>
            <div class="personalCont_Cont_right_cont_listB_head" @click="getmenuB()">
              <span>医学论文写作研修班（第二期）</span>
              <span>(2020-05-20 19:00:00-2020-05-25 21:00:00)</span>
              <span><i style="font-size:23px" :class="articleShowTwo ? 'iconfont icon-icon' : 'iconfont icon-arrow'"></i></span>
              <span>第二期</span>
            </div>
            <div class="personalCont_Cont_right_cont_listB_body" v-show="articleShowTwo">
              <el-table
                :data="tableData"
                style="width: 100%" :header-cell-style="{background:'#F8F8F8'}">
                <el-table-column prop="date" label="日期" min-width="110" align="center">
                </el-table-column>
                <el-table-column prop="name" label="提交者" min-width="70" align="center">
                </el-table-column>
                <el-table-column prop="article" label="文章" min-width="70" align="center">
                </el-table-column>
                <el-table-column prop="state" label="状态" min-width="120" align="center">
                </el-table-column>
                <el-table-column prop="admise" label="意见" align="center" min-width="170">
                </el-table-column>
                <el-table-column prop="opreation" label="操作" align="center" min-width="190">
                  <template>
                    <div class="opr_down">
                      <i class="iconfont icon-xiazai4"></i>
                      <span>下载</span>
                    </div>
                    <div class="opr_downB">
                      <span>上传修改</span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </li>
        </ul>
      </div>-->
		</div>
		<div class="personalCont_kbge"></div>
		<van-popup title="上传修改文章" :visible.sync="dialogFormVisible">
			<div class="regisCon_div">
				<p class="regisCon_div_artic">请输入您修改好的文章：</p>
				<el-input v-model="detection" disabled></el-input>
				<!-- <div class="regisCon_div_upload">上传</div> -->
				<el-upload class="upload-demo" ref="upload" action="/api/LmUserApi/Save" :limit="1"
					:before-upload="beforeUpload" id="file">
					<el-button slot="trigger" size="small" class="filedolown regisCon_div_upload" id="filedolown">上传
					</el-button>
				</el-upload>
				<div style="clear:both;"></div>
			</div>
			<div class="regisCon_div">
				<p class="regisCon_div_artic">简单输入您想说的话：</p>
				<textarea name id cols="30" rows="10"></textarea>
			</div>
			<div class="regisCon_div_submit">提交</div>
			<div slot="footer" class="dialog-footer" style="display:none;">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary">确 定</el-button>
			</div>
		</van-popup>

		

	</div>
</template>

<script>
	// import router from "@/router/index";
	//juqery
	export default {
		inject: ["reload"],
		data() {
			return {
				formRules: {},
				personRicont: 1,
				contA_tableData: [],
				currentPageA: 1,
				Issue: "",
				totalA: 0,
				courselisTit: [],
				courselisMenu: [],
				articleShow: false,

				articleShowTwo: false,

				// 进入直播判断开始时间，结束时间
				startdateB: "",
				enddateB: "",
				finTimeB: "",
				broadcastTimeC: "",
				endBroadcastTimeC: "",
				dialogFormVisible: false,

				detection: "",
				detectionB: ""
			};
		},
		methods: {
			finTimeB1(item) {
				return this.finTimeB >= new Date((item.StartDate).toString().replace('/-/g', '/')).getTime() && finTimeB <
					new Date((item.EndDate).toString().replace('/-/g', '/')).getTime() && item.IsStart == false
			},
			finTimeB2(item) {
				return this.finTimeB >= new Date((item.EndDate).toString().replace('/-/g', '/')) && item.IsStart == false
			},
			finTimeB3(item) {
				return this.finTimeB < new Date((item.StartDate).toString().replace('/-/g', '/')) && item.IsStart ==
					true && item.IsAllExpert == true
			},
			finTimeB4(item) {
				return this.finTimeB >= new Date((item.StartDate).toString().replace('/-/g', '/')).getTime() && finTimeB <
					new Date((item.EndDate).toString().replace('/-/g', '/')).getTime() && item.IsStart == true && item
					.IsAllExpert == true
			},
			finTimeB5(item) {
				return this.finTimeB >= new Date((item.EndDate).toString().replace('/-/g', '/')) && item.IsStart == true &&
					item
					.IsAllExpert == true
			},
			finTimeB6(item) {
				return item.IsStart == true && item.IsAllExpert == false
			},
			toPages() {
				this.$uniRouter.push({
					path: '/streaming'
				})
			},
			// 上传文件
			beforeUpload(file) {
				var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
				const extension = testmsg === "doc";
				const extension2 = testmsg === "docx";
				const extension3 = testmsg === "zip";
				// const isLt2M = file.size / 1024 / 1024 < 10
				if (!extension && !extension2 && !extension3) {
					this.$message({
						message: "上传文件只能是 doc、docx、zip格式!",
						type: "warning"
					});
					return extension || extension2 || extension3;
				} else {
					this.files = file;
					const isLt2M = file.size / 1024 / 1024 < 5;
					if (!isLt2M) {
						this.$message.warning("上传模板大小不能超过 5MB!");
						return;
					}
					this.detection = this.files.name;
					this.fileName = file.name;
					// return false // 返回false不会自动上传
					this.submitUpload();
				}
			},
			// 上传文件
			submitUpload() {
				if (this.fileName == "") {
					this.$message.warning("请选择要上传的文件！");
					return false;
				}
				let fileFormData = new FormData();
				fileFormData.append("filename", this.files, this.fileName); //filename是键，file是值，就是要传的文件，test.zip是要传的文件名
				let requestConfig = {
					headers: {
						"Content-Type": "multipart/form-data"
					}
				};
				this.$httphelper
					.post("/api/LmUserApi/Save", fileFormData, requestConfig)
					.then(res => {
						let path = JSON.parse(res.data);
						this.detectionB = path.filePath;
					})
					.catch(err => {
						console.log("请求失败：" + "err");
					});
			},

			// 进入直播间
			tomenuzhibojoin(item, index) {
				window.open(
					"https://livecvjournals.yywkt.com/live/livepolyv?openid=" +
					this.$localStorage.getItem("AuthorId") +
					"&channelid=" +
					item.ChannelId +
					"&cataopid=" +
					item.OpenId
				);
			},
			// 回放
			tomenuzhibohuifang(item, index) {},
			// 点击展开课表目录
			getmenu(index, OpClassId) {
				// this.articleShow = index
				this.articleShow = !this.articleShow;
				this.getcoursMenu(OpClassId);
			},
			getmenuB() {
				// 点击展开论文指导流程
				this.articleShowTwo = !this.articleShowTwo;
			},
			// 获取课表标题
			getcourstit() {
				this.$httphelper
					.post("/api/LmCourseApi/GetUserCourseList", {
						Sign: "string",
						OpenId: this.$localStorage.getItem("AuthorId")
					})
					.then(res => {
						this.courselisTit = res.data.data;
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 获取课表目录
			getcoursMenu(OpClassId) {
				this.$httphelper
					.post("/api/LmCourseApi/GetUserCourseCatalogList", {
						Sign: "string",
						AuthorId: this.$localStorage.getItem("AuthorId"),
						ClassId: OpClassId
					})
					.then(res => {
						this.courselisMenu = res.data.data;
						this.courselisMenu.forEach(item => {
							this.startdateB = item.StartDate.toString().replace("/-/g", "/");
							this.startdateB = new Date(this.startdateB).getTime();
							this.enddateB = item.EndDate.toString().replace("/-/g", "/");
							this.enddateB = new Date(this.enddateB).getTime();
						});
					})
					.catch(e => {
						console.log(e);
					});
			}
		},
		created() {
			this.getcourstit();
			// 获取当前时间
			let date = new Date();
			let datate = "";
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? "0" + MM : MM;
			let d = date.getDate();
			d = d < 10 ? "0" + d : d;
			let h = date.getHours();
			h = h < 10 ? "0" + h : h;
			let m = date.getMinutes();
			m = m < 10 ? "0" + m : m;
			let s = date.getSeconds();
			s = s < 10 ? "0" + s : s;
			datate = y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
			var strB = datate.toString();
			strB = strB.replace("/-/g", "/");
			// 当前时间时间戳
			this.finTimeB = new Date(strB).getTime();
		}
	};
</script>

<style lang="less" scoped>
	#downrecord {
		.personalCont_Cont_right_cont {
			width: 100%;
			height: 100%;
			padding: 30rpx;
		}
	}

	/deep/.el-dialog {
		border-radius: 20rpx !important;

		/deep/.el-dialog__header {
			border-bottom: 1px solid #efefef !important;

			/deep/.el-dialog__title {
				margin-left: 42% !important;
				font-size: 38rpx;
				font-weight: bold;
			}
		}

		/deep/.el-dialog__body {
			padding-top: 30rpx;
		}

		.regisCon_div {
			width: 92%;
			margin: 0 auto;
			padding-bottom: 24rpx;
			margin-bottom: 62rpx;

			.regisCon_div_artic {
				color: #6f6f6f;
				font-size: 28rpx;
				font-weight: bold;
			}

			.el-input {
				width: 80%;
				float: left;
				margin-top: 24rpx;
			}

			.regisCon_div_upload {
				float: left;
				width: 111px;
				height: 76rpx;
				background: #af0000;
				text-align: center;
				line-height: 38rpx;
				color: #fff;
				font-size: 34rpx;
				margin-left: 32rpx;
				margin-top: 24rpx;
				cursor: pointer;
			}

			textarea {
				width: 100%;
				margin-top: 24rpx;
			}
		}

		.regisCon_div_submit {
			width: 222rpx;
			height: 76rpx;
			background: #af0000;
			text-align: center;
			line-height: 76rpx;
			color: #fff;
			font-size: 34rpx;
			cursor: pointer;
			margin: 0 auto;
		}
	}

	@media screen and (max-width: 1010px) {
		.personalCont_Cont_right_cont_tishi {
			margin-top: 30rpx;
			font-size: 34rpx;

			i {
				margin-right: 26rpx;
			}

			text {
				color: #2d8cf0;
			}
		}

		.personalCont_Cont_right_cont {
			.personalCont_Cont_right_cont_tab_contB {
				width: 100%;

				li {
					list-style: none;
					float: left;
					width: 184rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					margin-right: 60rpx;
					background: #003c80;
					color: #fff;
					font-size: 32rpx;
				}
			}

			.personalCont_Cont_right_cont_list {
				margin-top: 34rpx;

				.personalCont_Cont_right_cont_list_head {
					width: 100%;
					background: #f8f8f8;
					padding: 18rpx;
					height: 184rpx;

					p {
						margin-bottom: 10rpx;
					}

					p:nth-child(1) {
						font-size: 30rpx;
						color: #333;
						font-weight: bold;
					}

					p:nth-child(2) {
						color: #999;
						font-size: 28rpx;
					}

					p:nth-child(3) {
						color: #333;
						font-size: 28rpx;

						span:nth-child(1) {
							float: left;
						}

						span:nth-child(2) {
							float: right;

							i {
								font-size: 32rpx !important;
							}
						}
					}
				}

				.personalCont_Cont_right_cont_list_body {
					width: 100%;

					li {
						list-style: none;
						padding: 16rpx;
						border-bottom: 1px solid #eeeeee;

						p {
							margin-bottom: 10rpx;
						}

						p:nth-child(1) {
							color: #333;
							font-size: 28rpx;
						}

						p:nth-child(2) {
							color: #999;
							font-size: 28rpx;
						}

						div {
							border: 1px solid #23b8ff;
							font-size: 28rpx;
							color: #23b8ff;
							padding: 4rpx 30rpx;
							position: relative;
							// top: -40px;
							cursor: pointer;
							width: 170rpx;
							text-align: center;
							padding: 14rpx 12rpx !important;
						}
					}
				}
			}
		}

		.personalCont_kbge {
			width: 100%;
			height: 140rpx;
			background: #fff;
		}
	}
</style>
